<template>
  <view v-if="userCount" class="item-info">
    <view class="team-item" @click="toTeams()">
      <view class="item-des">
        <text>{{ userCount.inviteCount || 0 }}</text>
        <u-icon name="/static/users/right.png" size="20"></u-icon>
      </view>
      <text class="des-title">邀请数(人)</text>
    </view>
    <view class="team-item" @click="toBalance(1)">
      <view class="item-des">
        <text>{{ userCount.totalMoneyYuan || 0.0 }}</text>
        <u-icon name="/static/users/right.png" size="20"></u-icon>
      </view>
      <text class="des-title">已入账(元)</text>
    </view>
    <view
      v-if="!showLevel && userCount.totalFreezingMoneyYuan"
      class="team-item"
      @click="toBalance(0)"
    >
      <view class="item-des">
        <text>{{ userCount.totalFreezingMoneyYuan }}</text>
        <u-icon name="/static/users/right.png" size="20"></u-icon>
      </view>
      <text class="des-title">待结算(元)</text>
    </view>
    <view v-else class="team-item">
      <view class="item-des">
        {{ userCount.levelWeightName || '无' }}
      </view>
      <text class="des-title">当月等级</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'share-monthly',
  props: {
    userCount: null,
    showLevel: false
  },
  data() {
    return {}
  },
  methods: {
    toBalance(status) {
      this.$u.route(
        '/attract/income-list?type=balance&year=' +
          this.userCount.year +
          '&month=' +
          this.userCount.month +
          '&status=' +
          status
      )
    },
    toTeams() {
      this.$u.route(
        'users/teams/index?year=' + this.userCount.year + '&month=' + this.userCount.month
      )
    }
  }
}
</script>

<style scoped lang="scss">
.item-info {
  width: 100%;
  margin-top: 50rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .team-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 15rpx;

    .item-des {
      display: flex;
      align-items: center;
      font-weight: 600;
      font-size: 34rpx;
      color: #333333;
      line-height: 50rpx;

      .des-title {
        font-size: 26rpx;
        color: #666666;
        line-height: 50rpx;
      }
    }
  }

  .team-item:last-child {
    margin-right: 0;
  }
}
</style>
